<template>
	<view class="">
        <view class="activity-info" v-if="activityInfo.id">
			<view class="info-box">
				<view class="user-info">
					<image class="head" :src="headHandle(activityInfo)" mode="aspectFill"></image>
					<view class="name-time">
						<text class="name">{{activityInfo.publicUserName}}</text>
						<text class="time">{{handleTime(activityInfo.add_time)}}</text>
					</view>
				</view>
			
				<text class="active-type" v-if="0">来自团委</text>
			</view>
			<view class="content">
				<view class="cont-title">
					{{activityInfo.title}}
				</view>
				<text class="cont-text">{{activityInfo.content}}</text>
				<view class="time-type">
					<text>活动类型：{{activityInfo.type_name}}</text><br>
					<text>活动截止时间：{{handleTime(activityInfo.end_date)}}</text>
				</view>
			</view>
			<view class="images-box" v-if="activityInfo.dst_imgs">
				<image class="img" v-for="(path, i) in activityInfo.dst_imgs" :key="i" :src="path" @click="previewImage(activityInfo.dst_imgs, i)" mode="aspectFill"></image>
			</view>
		</view>
		<view v-else class="activity-info">活动已删除</view>
		<view class="list">
			<view class="item" v-for="(item, i) in studentList" :key="i" @click="seeDetails(item.student.accountId, item.unCheckNum, item.student.name)">
                <view class="info">
                    <view class="head">
                        <image :src="utils.headImage(item.student)" mode="aspectFill"></image>
						<text class="red-dot"></text>
                    </view>
                    <view class="name-cla">
                        <text>{{item.student.name}}</text>
                        <view class="num-cla">
                            <text class="student-no">学号：{{item.student.studentNo}}</text>
                            <text>{{classMap[item.student.clasId]}}</text>
                        </view>
                    </view>
                </view>
                <view class="details">
                    <text>详情</text>
                    <uni-icons type="right" color="#28c2cd"></uni-icons>
                </view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data () {
		return {
            activityInfo: {},
			studentList: [],
            classMap: {}, // 所有班级信息
		} 
	},
    onLoad(){
        this.getSudents()
    },
	methods: {
        headHandle(info){
			// 处理头像显示
			info.avatarUrl = info.publicPic
			let type = this.allMembers[info.publisher_account_id]?this.allMembers[info.publisher_account_id].userType:2
			info.userType = type
			return this.utils.headImage(info)
		},
		getSudents(){
            setTimeout(() => {
                let newOrgGraders = getApp().globalData.baseInfo.newOrgGraders;
                for(let i=0; i<newOrgGraders.length; i++){
                    Object.assign(this.classMap, newOrgGraders[i])
                }
                this.studentList = [{student: {name: '张三',accountId: 817, avatarUrl:'', clasId: 21, grade: 0, studentNo: '1025', userType: 2}}]
                console.log(this.classMap)
            }, 2000)
        },
		// 审核任务详情
		seeDetails(accountId, state, name){
			let path = '';
			uni.setStorageSync('toBeReviewedStudents', this.studentList)
			state = this.tabIndex;

			path = `/pages/teachers/audit-details?accountId=${accountId}&state=${state}&name=${name}`
			uni.navigateTo({
				url: path
			})
		},
	}
}
</script>
<style lang="less" scoped>
    .activity-info{
		padding: 32rpx 32rpx 16rpx;
		background-color: #fff;
	}
	.info-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.active-type{
		font-size: 28rpx;color: #666666;
	}
	.user-info{
		display: flex;
		.head{
			width: 88rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}
	}
	.name-time{
		margin-left: 24rpx;
		.name{
			display: block;
			line-height: 44rpx;
			
		}
		.time{
			margin-top: 12rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	.content{
		margin-top: 24rpx;
	}
	.cont-title{
		color: #333;
		line-height: 40rpx;
		font-weight: 600;
	}
	.cont-text{
		margin-top: 24rpx;
		display: block;
		color: #666666;
		line-height: 44rpx;
	}
	.time-type{
		margin-top: 24rpx;
		color: #666;
		line-height: 44rpx;
	}
	.images-box{
		margin-top: 40rpx;
	}
	.images-box{
		font-size: 0;
		image{
			width: 215rpx;
			height: 215rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 24rpx;
			&:nth-child(3n){
				margin-right: 0;
			}
		}
	}
	.list{
		padding: 0 32rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 160rpx;
		font-size: 0;
	}

    .info{
		width: calc(100% - 40rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.head{
		position: relative;
		margin-right: 32rpx;
		image{
			width: 88rpx;
			height: 88rpx;
			border-radius: 44rpx;
		}
		.red-dot{
			position: absolute;
			top: -6rpx;
			right: 0;
			width: 28rpx;
			height: 28rpx;
			border-radius: 50%;
			background-color: red;
		}
	}
	.name-cla{
		width: calc(100% - 120rpx);
		font-size: 28rpx;
		line-height: 24rpx;
		color: #333333;
		font-weight: 600;
		.num-cla{
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-top: 18rpx;
			color: #999999;
			font-weight: normal;
			font-size: 24rpx;
		}
		.student-no{
			display: none;
			overflow: hidden;
			text-overflow: ellipsis;
			margin-right: 24rpx;
			max-width: 60%;
		}
	}
    .details{
        font-size: 24rpx;
        white-space: nowrap;
        color: #28c2cd;
    }
</style>